<template>
  <Layout class="cms-main-basic" :leftCollapse="menuCollapse">
    <template #header>
      <Header @toggle="doHeaderToggle">
        <el-avatar :size="30" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" />
      </Header>
    </template>
    <template #left>
      <div class="left-wrap">
        <Logo :collapse="menuCollapse"></Logo>
        <CmsMenu :menus="menus" :collapse="menuCollapse"></CmsMenu>
      </div>
    </template>
    <template #default>
      <router-view></router-view>
    </template>
  </Layout>
</template>

<script>
// import { useRoute, useRouter } from 'vue-router'
// const router = useRouter()
// const route = useRoute()

// console.log(route) // 获取路由参数
// router.push('/logo') // 进行路由跳转

import { defineComponent, reactive, toRefs } from 'vue'
import Layout from '@/layout/index'
import Header from '@/layout/Header'
import Logo from '@/layout/Logo'

export default defineComponent({
  components: {
    Layout,
    Header,
    Logo
  },
  setup() {
    const state = reactive({
      menus: [
        {
          id: '1',
          name: '菜单1',
          href: '1',
          icon: '',
          children: [
            {
              id: '1-1',
              name: '表单demo',
              href: '/demo/form',
              icon: ''
            },
            {
              id: '1-2',
              name: '菜单1-2',
              href: '1-2',
              icon: ''
            }
          ]
        },
        {
          id: '2',
          name: '菜单2',
          href: '2',
          icon: ''
        },
        {
          id: '3',
          name: '菜单3',
          href: '3',
          icon: '',
          children: [
            {
              id: '3-1',
              name: '菜单3-1',
              href: '3-1',
              icon: ''
            }
          ]
        }
      ],

      menuCollapse: false
    })
    const doHeaderToggle = (v) => {
      console.log(v)
      state.menuCollapse = v
    }
    return {
      ...toRefs(state),
      doHeaderToggle
    }
  }
})
</script>
<style lang="scss" scoped>
.cms-main-basic {
  height: 100%;
  box-sizing: border-box;

  .left-wrap {
    height: 100%;
    box-sizing: border-box;
  }
}
</style>
